<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>事件处理</title>
    <script src='./vue.global.js'></script>
</head>
<body>
    <div id='app'>
        <!-- 用hello函数响应click事件 -->
        <button @click="hello">点哥</button>
        <hr>

        <!-- 调用函数并入实参 -->
        <button @click="sayHi('峰哥')">雷猴</button>
        <hr>

        <!-- 调用函数的时候同时入参业务参数 + 事件对象 -->
        <button @click="warn('我马上要把诽谤锅锅的人送去吃牢饭',$event)">警告</button>
        <hr>

        <!-- 一个事件有多个处理函数 -->
        <button @click="sayHi('Mr skr'),warn('我马上要把诽谤锅锅的人送去吃牢饭',$event)">Double Kill</button>
        <hr>

    </div>

    <script>

        Vue.createApp({

            methods:{
                /* 
                当click事件发生时 浏览器回调hello函数 并入实参【事件对象】
                */
                hello(e){
                    alert("hello")

                    // 打印事件末梢元素的标签名
                    console.log(e.target.tagName);

                    // 打印事件对象
                    console.log("e=",e);
                },

                sayHi(who){
                    alert("雷猴啊!"+who)
                },

                warn(msg,e){
                    alert(msg)
                    console.log(e);
                }

            }

        }).mount('#app')

    </script>
</body>
</html>